﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>charts</title>

    <link href="charts.css" rel="stylesheet" />
    <link href="fancy.css" rel="stylesheet" />
    <script src="charts.js"></script>
</head>
<body>
    <div class="charts fragment">
        <!-- BUG: FIXED: turns out that I forgot to say "options.satellite" and instead just bound to "satellite" -->
        <div class="background-image" data-win-bind="style.backgroundImage: options.satellite"></div>
        <header class="page-header" aria-label="Header content" role="banner">
            <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle" data-win-bind="textContent: options.zip"></span>
            </h1>
        </header>
        <section class="page-section" aria-label="Main content" role="main">

            <!-- NOTE: We simply cloned charts.html into the Phone specific project and changed Hub -> Pivot and 
                       HubSection -> PivotItem, if you are using them extensively there are a couple of differences
                       in API and are styled differently but are largely compatible.
            -->
            <div data-win-control="WinJS.UI.Pivot">

                <div data-win-control="WinJS.UI.PivotItem"
                     data-win-options="{
                        header: 'Population'
                     }">

                    <div data-win-control="WinJS.UI.Repeater"
                         data-win-options="{
                            data: select('.pagecontrol').winControl.population,
                         }">

                        <div class="genderByAge">
                            <div class="ageRange" data-win-bind="textContent: ageRange"></div>
                            <div class="male" data-win-bind="style.width: malePercent;"></div>
                            <div class="female" data-win-bind="style.width: femalePercent;"></div>
                        </div>

                    </div>

                </div>


                <div data-win-control="WinJS.UI.PivotItem"
                     data-win-options="{
                        header: 'Commute'
                     }">

                    <div data-win-control="WinJS.UI.Repeater"
                         data-win-options="{ data: select('.pagecontrol').winControl.commute }">
                        <div class="commuteBy">
                            <div class="circle" data-win-bind="style.width: percent; style.height: percent; style.backgroundImage: bgImage" style="border-radius: 100%; background-size: cover; -ms-grid-row-align: center; -ms-grid-column-align: center;"></div>
                            <div class="value" data-win-bind="textContent: percent" style="-ms-grid-column: 3; -ms-grid-column-align: start; -ms-grid-row-align: center; font-size: 3em;"></div>
                        </div>
                    </div>

                </div>


                <div data-win-control="WinJS.UI.PivotItem"
                     data-win-options="{
                        header: 'Housing'
                     }">

                    <div class="housingGraph"
                         data-win-control="WinJS.UI.Repeater"
                         data-win-options="{ data: select('.pagecontrol').winControl.housing }">
                        <div data-win-bind="className: type; style.height: percent" style="-ms-grid-row-align: end;">
                            <span class="housingLabel slideUp" data-win-bind="textContent: type"></span>
                            <span class="housingValue slideUp" data-win-bind="textContent: percent"></span>
                        </div>
                    </div>

                </div>
            </div>

        </section>
    </div>
</body>
</html>
